<template>
    <div class="new-lists">
        <template v-if="newsList && newsList.length">
            <list-item
                v-for="(item, index) in newsList"
                :key="index"
                :listItem="item"
            ></list-item>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="pager, next"
                :total="total"
            >
            </el-pagination>
        </template>
        <div v-else class="p-30 txt-info fs-14">暂无新闻~</div>
    </div>
</template>

<script>
    import ListItem from './ListItem'
    export default {
        name: 'newsLists',
        components: {
            ListItem,
        },
        data() {
            return {
                total: null,
                pageSize: 10,
                currentPage: 1,
                newsList: [],
            }
        },
        methods: {
            getNewsLists() {
                let dataMsg = {
                    type: '',
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }
                this.$http
                    .getNewsLists({ dataMsg: JSON.stringify(dataMsg) })
                    .then((res) => {
                        if (res.success) {
                            this.total = res.data.total
                            this.newsList = res.data.data
                            this.newsList.forEach((item) => {
                                item.news = item.news.replace(/<.+?>/g, '')
                                item.news = item.news.replace(/&nbsp;/g, '')
                            })
                        }
                    })
                    .catch((err) => {
                        this.$msgAlert(err)
                    })
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getNewsLists()
            },
        },
        mounted() {
            this.getNewsLists()
        },
    }
</script>

<style>
    .new-lists {
        margin-top: 20px;
        font-size: 16px;
        min-height: 400px;
    }
    .el-pagination {
        margin: 30px 0 60px;
    }
</style>